<!--
 * @Author: chunlai
 * @Date: 2025-07-18 12:09:47
 * @LastEditTime: 2025-08-21 15:25:06
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \02.bldinsure\src\views\form\components\RenewalModal.vue
 * @Description: 续保(统一合并)模块
-->
<template>
  <div class="step-renewal">
    <div class="of_hid">
      <div class="topSec">
        <div>
          <div class="form-head-name">续保信息</div>
        </div>
      </div>
      <van-field
        label="是否自动申请续保"
        class="refrenewFlag"
        :class="{ disEditModel: disabledEdit }"
        :error="tipsInfo.renewFlag !== ''"
        :input-align="inputAlign"
        readonly
        label-width="120px"
      >
        <div class="flex_ac" slot="input">
          <MsRadios
            :curVal="xbForm.renewFlag"
            :arrList="renewList"
            type="renewFlag"
            @change="changeRadio"
          >
          </MsRadios>
        </div>
      </van-field>
      <div class="xubao-desc" :class="xbForm.renewFlag == '-1' ? 'active' : ''">
        <div class="xubao-label">开通下一年自动续费：</div>
        <div class="xubao-text">
          <p v-if="compEngName == 'bainian'">
            <van-icon name="warning-o" size="14" class="mr4" />
            您投保了一年期主险/附加险
          </p>
          <p v-if="compEngName == 'ansheng'">
            <van-icon name="warning-o" size="14" class="mr4" />
            免健告免等待期，保障不间断
          </p>
          <p>
            <van-icon name="warning-o" size="14" class="mr4" />
            重新投保自动缴费后可随时取消
          </p>
          <p>
            <van-icon name="warning-o" size="14" class="mr4" />
            下一年会按照续保时对应的保费进行扣费
          </p>
          <p v-if="autoRenewalFile.name">
            <van-icon name="warning-o" size="14" class="mr4" /> 开通前请仔细阅读
            <span @click="showFilePop">{{ autoRenewalFile.name }}</span>
          </p>
        </div>
      </div>
      <div v-if="xbForm.renewFlag == '-1'">
        <van-field
          label="账户姓名（投保人）"
          class="refbankAccName"
          :value="xbForm.bankAccName"
          label-width="180px"
          :readonly="true"
          :input-align="inputAlign"
          v-if="infoReg.hasOwnProperty('bankAccName')"
        />
        <van-field
          label="银行账号"
          class="refbankAccNo"
          v-model="xbForm.bankAccNo"
          @click="tipsInfo.bankAccNo = ''"
          type="number"
          maxlength="21"
          clearable
          clear-trigger="always"
          :input-align="inputAlign"
          placeholder="请输入"
          :error="tipsInfo.bankAccNo !== ''"
          v-if="infoReg.hasOwnProperty('bankAccNo')"
        />
        <van-field
          class="reffirBankMobile"
          v-model="xbForm.firBankMobile"
          @focus="tipsInfo.firBankMobile = ''"
          :error="tipsInfo.firBankMobile !== ''"
          type="number"
          maxlength="11"
          clearable
          label-width="170px"
          clear-trigger="always"
          :input-align="inputAlign"
          placeholder="请输入"
          v-if="infoReg.hasOwnProperty('firBankMobile')"
        >
          <div slot="label" class="flexlabel">
            <span class="mr5">预留手机号</span>
            <div
              class="same_to_btn"
              :class="phoneSameWithAppnt ? 'is_same_res' : ''"
              @click.stop="
                tipsInfo.firBankMobile = '';
                sameToAppnt($event, 'firBankMobile');
              "
            >
              同投保人
            </div>
          </div>
        </van-field>
      </div>
    </div>
    <HtmlProtocol ref="htmlRef" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import HtmlProtocol from "./HtmlProtocol";
import { validXuBaoInfo } from "@/translate/validate/xubao";
export default {
  name: "RenewalModal",
  components: { HtmlProtocol },
  data() {
    return {
      inputAlign: "right",
      pageLoad: false,
      xbForm: {
        renewFlag: "",
        bankAccName: "",
        bankAccNo: "",
        firBankMobile: "",
      },
      tipsInfo: {
        renewFlag: "",
        bankAccName: "",
        bankAccNo: "",
        firBankMobile: "",
      },
    };
  },
  computed: {
    ...mapGetters({
      infoReg: "page/renewal",
      applicant: "insert/applicant",
      renewalInfo: "insert/renewalInfo",
      renewList: "dictionary/renewList",
      autoRenewalFile: "dictionary/autoRenewalFile",
    }),
    phoneSameWithAppnt() {
      let res = false;
      if (this.xbForm.firBankMobile == this.applicant.phone) {
        res = true;
      }
      return res;
    },
  },
  watch: {
    xbForm: {
      handler: function (val) {
        if (this.pageLoad) {
          this.$store.commit("insert/UPDATE_RENEWAL_INFO", val);
        }
      },
      deep: true,
    },
    "applicant.name": {
      handler: function (val) {
        if (this.pageLoad) {
          if (val) {
            this.xbForm.bankAccName = val;
          }
        }
      },
      deep: true,
    },
  },
  created() {
    const xbItem = this.renewalInfo;
    Object.keys(this.xbForm).map((key) => {
      if (xbItem.hasOwnProperty(key)) {
        this.xbForm[key] = xbItem[key];
      }
    });
    if (this.applicant.name) {
      this.changeData({ bankAccName: this.applicant.name });
    }
    this.$nextTick(() => {
      this.pageLoad = true;
    });
  },
  mounted() {},
  methods: {
    saveForm() {
      // 校验+提交
      const iptCfg = JSON.parse(JSON.stringify(this.infoReg));
      let res = validXuBaoInfo(iptCfg, this.xbForm);
      // console.log("res", res);
      if (!res.status) {
        let target = document.querySelector(`.ref${res.target}`);
        this.tipsInfo[res.target] = res.msg;
        if (target) {
          target.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
        this.$store.commit("common/SET_FIELD_MEAN_CONT", {
          label: `续保规则校验`,
          desc: `${res.msg}`,
        });
      }
      if (
        res.status &&
        this.compEngName == "bainian" &&
        this.xbForm.renewFlag != "-1"
      ) {
        res.breakTips = ["您当前选择的一年期附加险产品，请确认是否选择自动申请续保？"];
      }
      return res;
    },
    changeRadio(type, item) {
      let obj = {};
      obj[type] = item.keyId || item.value;
      this.changeData(obj);
      if (type === "renewFlag") {
        if (item.value == "-1") {
          if (this.autoRenewalFile.label) {
            this.showFilePop();
          }
        }
      }
    },
    showFilePop() {
      this.$nextTick(() => {
        this.$refs.htmlRef.initModal(this.autoRenewalFile);
      });
    },
    sameToAppnt(event, type) {
      if (event) event.preventDefault();
      if (type == "firBankMobile") {
        this.changeData({
          firBankMobile: !this.phoneSameWithAppnt ? this.applicant.phone : "",
        });
      }
    },
    changeData(data) {
      Object.assign(this.xbForm, data);
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="less" scoped>
@import "../style.less";
.xubao-desc {
  font-size: 12px;
  line-height: 26px;
  padding: 5px 16px 10px;
  color: #909399;
  background: #f4f4f5;
  &.active {
    color: #e7a249;
    background: linear-gradient(270deg, #ffefe4, #fff7e4);
  }
  span {
    font-style: normal;
    color: #409eff;
  }
  p {
    display: flex;
    align-items: center;
    line-height: 22px;
  }
}
</style>
